<template>
  <!--添加记录 start-->
  <el-dialog
      draggable
      destroy-on-close
      v-model="dialogAddVisible"
      title="添加"
      width="80%"
      center>
    <el-form inline :model="addFormInfo" label-width="50px">
      <el-form-item label="采购">
        <el-input type="textarea" rows="3" v-model="addFormInfo.productRecordProcurement"></el-input>
      </el-form-item>
      <el-form-item label="存储">
        <el-input type="textarea" rows="3" v-model="addFormInfo.productRecordStorage"></el-input>
      </el-form-item>
      <el-form-item label="使用情况">
        <el-input type="textarea" rows="3" v-model="addFormInfo.productRecordUsage"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="http_productRecord_add">确定</el-button>
            </span>
    </template>
  </el-dialog>
  <!--添加记录 end-->
  <TopNav title="产品追溯"/>
  <div class="container">
    <!--产品列表 start-->
    <el-collapse v-model="currentProductId" @change="handleChange" accordion>
      <el-collapse-item :name="item.nutritionProductId" v-for="(item,index) in dataList.list" :key="index">
        <template #title>
          <div class="product">
            <div class="name">{{ item.name }}
              <el-button @click="record_add(item.nutritionProductId)" class="button" size="small" type="success">新增记录</el-button>
            </div>
          </div>
        </template>
        <el-card class="record" v-for="(item2,index2) in recordList.list" :key="index2">
          <p>采购<span>{{ item2.productRecordProcurement }}</span></p>
          <p>存储<span>{{ item2.productRecordStorage }}</span></p>
          <p>使用情况<span>{{ item2.productRecordUsage }}</span></p>
        </el-card>
      </el-collapse-item>
    </el-collapse>
    <!--产品列表 end-->
  </div>
</template>

<script setup>
import {useDataStore} from "@/stores/dataStore.js";
import {useRoute, useRouter} from 'vue-router'
import TopNav from "@/components/TopNav/Back.vue"
import repositoryAxios from "@/api/repository.js"
import {onMounted, reactive, ref} from "vue";

const route = useRoute()
//route.params.name;
const router = useRouter()
const dataStore = useDataStore()
//当前折叠选中id
const currentProductId = ref(0)
//当前新增选中id
const currentProductId_add = ref(0)
//初始化分页查询数据
const dataList = reactive({
  list: []
})
const recordList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
onMounted(() => {
  http_product_search()
})
/**
 * 查询产品
 */
const http_product_search = () => {
  repositoryAxios.nutritionProduct_search({
    search: searchInfo.value,
    page: currentPage.value,
    size: defaultPageSize.value
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 根据产品id查询记录
 */
const http_record = (id) => {
  repositoryAxios.productRecord_searchByNutritionProductId({
    nutritionProductId: id,
    search: '',
    page: 1,
    size: 10
  }).then(res => {
    if (res.data.code == 200) {
      recordList.list = res.data.data.records
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 折叠面板切换
 */
const handleChange = (val) => {
  console.log(val)
  currentProductId.value = val
  http_record(val)
}
/**
 * 新增记录
 */
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  productRecordProcurement: "",
  productRecordStorage: "",
  productRecordUsage: "",
  nutritionProductId: "",
})
//新增弹出框
const record_add=(id)=>{
  dialogAddVisible.value=true
  currentProductId_add.value=id
}
//新增请求
const http_productRecord_add = () => {
  repositoryAxios.productRecord_add({
    productRecordProcurement: addFormInfo.productRecordProcurement,
    productRecordStorage: addFormInfo.productRecordStorage,
    productRecordUsage: addFormInfo.productRecordUsage,
    nutritionProductId: currentProductId_add.value,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      ElMessage.success("新增成功")
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
</script>

<style scoped lang="scss">
.product {
  .name {
    margin: 5px;
    font-family: 楷体;
    font-size: 17px;
  }
}

.record {
  p {
    margin: 4px;
    font-size: 14px;
    font-weight: bolder;

    span {
      margin-left: 10px;
      opacity: .8;
      font-size: 12px;
      font-weight: 300;
    }
  }
}
</style>
